<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花龙腾航 - 会员中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
        }
        
        .logo-text {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 700;
        }
        
        .progress-bar {
            height: 8px;
            border-radius: 4px;
            background-color: #e5e7eb;
        }
        
        .progress-fill {
            height: 100%;
            border-radius: 4px;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            transition: width 0.3s ease;
        }
        
        .tier-card {
            transition: all 0.3s ease;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        .tier-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }
        
        .benefit-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            min-width: 200px;
            z-index: 10;
        }
        
        .dropdown-menu.open {
            display: block;
        }
        
        .dropdown-item {
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .dropdown-item:hover {
            background-color: #f3f4f6;
        }
        
        .user-avatar {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }
        
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .tab-active {
            position: relative;
            color: #3b82f6;
            font-weight: 600;
        }
        
        .tab-active:after {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            height: 3px;
            background: #3b82f6;
            border-radius: 3px 3px 0 0;
        }

        /* Tier colors */
        .tier-bronze {
            background: linear-gradient(135deg, #cd7f32, #a67c52);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .tier-silver {
            background: linear-gradient(135deg, #c0c0c0, #a6a6a6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .tier-gold {
            background: linear-gradient(135deg, #ffd700, #d4af37);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .tier-platinum {
            background: linear-gradient(135deg, #e5e4e2, #b8b8b8);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .tier-diamond {
            background: linear-gradient(135deg, #b9f2ff, #7ec8e3);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        /* Tier badges */
        .tier-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }
        
        .badge-bronze {
            background-color: #f3e9d2;
            color: #a67c52;
        }
        
        .badge-silver {
            background-color: #f0f0f0;
            color: #808080;
        }
        
        .badge-gold {
            background-color: #fff9e6;
            color: #d4af37;
        }
        
        .badge-platinum {
            background-color: #f0f0f0;
            color: #555555;
        }
        
        .badge-diamond {
            background-color: #e6f7ff;
            color: #00a0e9;
        }
        
        /* Tier progress bars */
        .progress-bronze {
            background: linear-gradient(90deg, #cd7f32, #a67c52);
        }
        
        .progress-silver {
            background: linear-gradient(90deg, #c0c0c0, #a6a6a6);
        }
        
        .progress-gold {
            background: linear-gradient(90deg, #ffd700, #d4af37);
        }
        
        .progress-platinum {
            background: linear-gradient(90deg, #e5e4e2, #b8b8b8);
        }
        
        .progress-diamond {
            background: linear-gradient(90deg, #b9f2ff, #7ec8e3);
        }
    </style>
</head>
<body>
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fas fa-plane text-3xl text-blue-500"></i>
            <h1 class="text-2xl font-bold logo-text">花龙腾航</h1>
        </div>
        <nav class="hidden md:flex space-x-6">
            <a href="user_index" class="text-gray-600 hover:text-blue-500">首页</a>
            <a href="user_flight_search" class="text-gray-600 hover:text-blue-500">航班查询</a>
            <a href="user_order" class="text-gray-600 hover:text-blue-500">我的订单</a>
            <a href="user_ticket" class="text-gray-600 hover:text-blue-500">我的机票</a>
            <a href="#" class="text-blue-500 font-medium">会员中心</a>
        </nav>
        <div class="flex items-center space-x-4">
            <div class="flex items-center space-x-2 cursor-pointer group relative" id="user-menu">
                <div class="w-8 h-8 rounded-full user-avatar overflow-hidden">
                    <img th:if="${imageExists}" th:src="'static/images/'+${user.getU_id()}+'.jpg?version=' + ${#dates.createNow().time}" alt="用户头像" class="w-full h-full object-cover">
                    <img th:if="${!imageExists} and ${user.getSex()} == '女'" src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-full h-full object-cover">
                    <img th:if="${!imageExists} and ${user.getSex()} == '男'" src="https://randomuser.me/api/portraits/men/71.jpg" alt="用户头像" class="w-full h-full object-cover">
                </div>
                <span class="hidden md:inline text-gray-700 group-hover:text-blue-500" th:text="${user.getU_name()}">张先生</span>
                <div class="dropdown-menu" id="dropdown-menu">
                    <div class="dropdown-item" onclick="location.href='user_profile'">
                        <i class="fas fa-user-cog mr-2"></i> 个人主页
                    </div>
                    <div class="dropdown-item" onclick="location.href='user_account_manage'">
                        <i class="fas fa-cog mr-2"></i> 账号管理
                    </div>
                    <div class="border-t border-gray-200 my-1"></div>
                    <div class="dropdown-item text-red-500" onclick="location.href='user_logout'">
                        <i class="fas fa-sign-out-alt mr-2"></i> 退出登录
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
    <div class="flex flex-col md:flex-row gap-8">
        <!-- Sidebar -->
        <aside class="w-full md:w-64 bg-white rounded-xl shadow-sm p-6 h-fit sticky top-24">
            <div class="flex items-center space-x-3 mb-6">
                <div class="h-12 w-12 rounded-full user-avatar flex items-center justify-center text-white text-xl overflow-hidden">
                    <img th:if="${imageExists}" th:src="'static/images/'+${user.getU_id()}+'.jpg?version=' + ${#dates.createNow().time}" alt="用户头像" class="w-full h-full object-cover">
                    <img th:if="${!imageExists} and ${user.getSex()} == '女'" src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-full h-full object-cover">
                    <img th:if="${!imageExists} and ${user.getSex()} == '男'" src="https://randomuser.me/api/portraits/men/71.jpg" alt="用户头像" class="w-full h-full object-cover">
                </div>
                <div>
                    <h3 class="font-bold text-gray-800" th:text="${user.getU_name()}">张先生</h3>
                    <p class="text-xs text-gray-500" th:text="${user.getGrade()}">黄金会员</p>
                </div>
            </div>
            
            <nav class="space-y-1">
                <a href="user_profile" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition">
                    <i class="fas fa-user mr-3 text-gray-400"></i> 个人资料
                </a>
                <a href="user_order" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition">
                    <i class="fas fa-ticket-alt mr-3 text-gray-400"></i> 我的订单
                </a>
                <a href="user_ticket" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition">
                    <i class="fas fa-ticket mr-3 text-gray-400"></i> 我的机票
                </a>
                <a href="#" class="block px-4 py-2 rounded-lg bg-blue-50 text-blue-600 font-medium transition">
                    <i class="fas fa-crown mr-3 text-blue-500"></i> 会员权益
                </a>
                <a href="user_account_manage" class="block px-4 py-2 rounded-lg text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition">
                    <i class="fas fa-cog mr-3 text-gray-400"></i> 账户设置
                </a>
            </nav>
            
            <div class="mt-8 pt-4 border-t border-gray-100">
                <h4 class="text-sm font-medium text-gray-500 mb-2">会员里程</h4>
                <div class="flex items-center justify-between mb-1">
                    <span class="text-xs text-gray-500">当前里程</span>
                    <span class="text-xs font-medium" th:text="${mileage}+' 里程'">8,500</span>
                </div>
                <div class="progress-bar mb-2">
                    <div th:if="${user.getGrade()} == '普通会员'" class="progress-fill progress-silver" th:style="'width: ' + (${mileage} / 2500 * 100) + '%'"></div>
                    <div th:if="${user.getGrade()} == '黄金会员'" class="progress-fill progress-gold" th:style="'width: ' + (${mileage} / 10000 * 100) + '%'"></div>
                    <div th:if="${user.getGrade()} == '白金会员'" class="progress-fill progress-platinum" th:style="'width: ' + (${mileage} / 25000 * 100) + '%'"></div>
                    <div th:if="${user.getGrade()} == '钻石会员'" class="progress-fill progress-diamond" style="width: 100%"></div>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-xs text-gray-500">升级还需</span>
                    <span th:if="${user.getGrade()} == '普通会员'" class="text-xs font-medium" th:text="${2499 - mileage}+' 里程'">1,500</span>
                    <span th:if="${user.getGrade()} == '黄金会员'" class="text-xs font-medium" th:text="${10000 - mileage}+' 里程'">1,500</span>
                    <span th:if="${user.getGrade()} == '白金会员'" class="text-xs font-medium" th:text="${24999 - mileage}+' 里程'">1,500</span>
                </div>
            </div>
        </aside>
        
        <!-- Membership Content -->
        <div class="flex-1">
            <div class="bg-white rounded-xl shadow-sm overflow-hidden fade-in">
                <div class="p-6 border-b border-gray-100">
                    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                        <div>
                            <h2 class="text-xl font-bold text-gray-800 mb-1">会员中心</h2>
                            <p class="text-sm text-gray-500">享受您的专属会员权益</p>
                        </div>
                        <div class="flex items-center space-x-2">
                            <span th:if="${user.getGrade() == '普通会员'}" class="tier-badge badge-silver">普通会员</span>
                            <span th:if="${user.getGrade() == '黄金会员'}" class="tier-badge badge-gold">黄金会员</span>
                            <span th:if="${user.getGrade() == '白金会员'}" class="tier-badge badge-platinum">白金会员</span>
                            <span th:if="${user.getGrade() == '钻石会员'}" class="tier-badge badge-diamond">钻石会员</span>
                            <span class="text-sm text-gray-600">有效期至: 2025/12/31</span>
                        </div>
                    </div>
                </div>
                
                <!-- Tabs -->
                <div class="border-b border-gray-200 px-6">
                    <div class="flex space-x-8 overflow-x-auto">
                        <button onclick="showTab('overview')" class="pb-3 px-1 tab-active" id="tab-overview">
                            会员概览
                        </button>
                        <button onclick="showTab('benefits')" class="pb-3 px-1 text-gray-500 hover:text-blue-500" id="tab-benefits">
                            会员权益
                        </button>
                    </div>
                </div>
                
                <!-- Tab Content -->
                <div class="p-6">
                    <!-- Overview Tab -->
                    <div id="overview-tab" class="tab-content">
                        <div class="mb-8">
                            <h3 class="text-lg font-medium text-gray-800 mb-4">您的会员等级</h3>
                            <div th:if="${user.getGrade() == '普通会员'}" class="bg-gradient-to-r from-gray-100 to-gray-50 rounded-xl p-6 border border-gray-200">
                                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                    <div>
                                        <h4 class="text-xl font-bold tier-gray mb-1">普通会员</h4>
                                        <p class="text-sm text-gray-600 mb-2">享受优先值机、额外行李额等特权</p>
                                        <div class="flex items-center space-x-2">
                                            <span class="text-xs font-medium bg-gray-100 text-gray-800 px-2 py-1 rounded-full">有效期至: 2025/12/31</span>
                                            <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2 py-1 rounded-full" th:text="${mileage}+' 里程'">8,500 里程</span>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div class="h-16 w-16 rounded-full bg-gray-100 flex items-center justify-center">
                                            <i class="fas fa-user text-2xl text-gray-400"></i>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="mt-6">
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-sm text-gray-600">升级进度</span>
                                        <span class="text-sm font-medium" th:text="${mileage}+'/2,499 里程'">8,500/10,000 里程</span>
                                    </div>
                                    <div class="progress-bar mb-2">
                                        <!--div class="progress-fill progress-silver" style="width: 85%"></div-->
                                        <div class="progress-fill progress-silver" th:style="'width: ' + (${mileage} / 2500 * 100) + '%'">
                                        </div>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-gray-500" th:text="'升到黄金会员还需 '+${2500 - mileage}+' 里程'">升级到黄金会员还需 1,500 里程</span>
                                        <span class="text-xs font-medium text-silver-600"  th:text="(${mileage} / 2500 * 100) + '%'">85%</span>
                                    </div>
                                </div>
                            </div>
                            <div th:if="${user.getGrade() == '黄金会员'}" class="bg-gradient-to-r from-yellow-100 to-yellow-50 rounded-xl p-6 border border-yellow-200">
                                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                    <div>
                                        <h4 class="text-xl font-bold tier-gold mb-1">黄金会员</h4>
                                        <p class="text-sm text-gray-600 mb-2">享受优先值机、额外行李额等特权</p>
                                        <div class="flex items-center space-x-2">
                                            <span class="text-xs font-medium bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">有效期至: 2025/12/31</span>
                                            <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2 py-1 rounded-full" th:text="${mileage}+' 里程'">8,500 里程</span>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div class="h-16 w-16 rounded-full bg-yellow-100 flex items-center justify-center">
                                            <i class="fas fa-crown text-2xl text-yellow-600"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-6">
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-sm text-gray-600">升级进度</span>
                                        <span class="text-sm font-medium" th:text="${mileage}+'/10,000 里程'">8,500/10,000 里程</span>
                                    </div>
                                    <div class="progress-bar mb-2">
                                        <div class="progress-fill progress-gold"  th:style="'width: ' + (${mileage} / 10000 * 100) + '%'"></div>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-gray-500" th:text="'升到白金会员还需 '+${10000 - mileage}+' 里程'">升级到白金会员还需 1,500 里程</span>
                                        <span class="text-xs font-medium text-silver-600"  th:text="(${mileage} / 10000 * 100) + '%'">85%</span>
                                    </div>
                                </div>
                            </div>
                            <div th:if="${user.getGrade() == '白金会员'}" class="bg-gradient-to-r from-silver-100 to-silver-50 rounded-xl p-6 border border-silver-200">
                                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                    <div>
                                        <h4 class="text-xl font-bold tier-silver mb-1">白金会员</h4>
                                        <p class="text-sm text-gray-600 mb-2">享受优先值机、额外行李额等特权</p>
                                        <div class="flex items-center space-x-2">
                                            <span class="text-xs font-medium bg-silver-100 text-silver-800 px-2 py-1 rounded-full">有效期至: 2025/12/31</span>
                                            <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2 py-1 rounded-full" th:text="${mileage}+' 里程'">8,500 里程</span>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div class="h-16 w-16 rounded-full bg-gray-200 flex items-center justify-center">
                                            <i class="fas fa-star text-2xl text-gray-500"></i>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-6">
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-sm text-silver-600">升级进度</span>
                                        <span class="text-sm font-medium" th:text="${mileage}+'/24,999 里程'">8,500/10,000 里程</span>
                                    </div>
                                    <div class="progress-bar mb-2">
                                        <div class="progress-fill progress-platinum"  th:style="'width: ' + (${mileage} / 25000 * 100) + '%'"></div>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <span class="text-xs text-silver-500" th:text="'升到白金会员还需 '+${25000 - mileage}+' 里程'">升级到白金会员还需 1,500 里程</span>升级到钻石会员还需 1,500 里程</span>
                                        <span class="text-xs font-medium text-silver-600"  th:text="(${mileage} / 25000 * 100) + '%'">85%</span>
                                    </div>
                                </div>
                            </div>
                            <div th:if="${user.getGrade() == '钻石会员'}" class="bg-gradient-to-r from-blue-100 to-blue-50 rounded-xl p-6 border border-blue-200">
                                <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                                    <div>
                                        <h4 class="text-xl font-bold tier-diamond mb-1">钻石会员</h4>
                                        <p class="text-sm text-gray-600 mb-2">享受优先值机、额外行李额等特权</p>
                                        <div class="flex items-center space-x-2">
                                            <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2 py-1 rounded-full">有效期至: 2025/12/31</span>
                                            <span class="text-xs font-medium bg-blue-100 text-blue-800 px-2 py-1 rounded-full" th:text="${mileage}+' 里程'">8,500 里程</span>
                                        </div>
                                    </div>
                                    <div class="flex-shrink-0">
                                        <div class="h-16 w-16 rounded-full bg-blue-100 flex items-center justify-center">
                                            <i class="fas fa-gem text-2xl text-blue-500"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-6">
                                    <div class="flex items-center justify-between mb-1">
                                        <span class="text-sm text-gray-600">升级进度</span>
                                        <span class="text-sm font-medium" th:text="${mileage}+'/25,000 里程'">25,000+/25,000+ 里程</span>
                                    </div>
                                    <div class="progress-bar mb-2">
                                        <div class="progress-fill progress-diamond" style="width: 100%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-medium text-gray-800 mb-4">会员等级体系</h3>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">会员等级</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">所需里程</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">有效期</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="flex items-center">
                                                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
                                                        <i class="fas fa-user text-gray-400"></i>
                                                    </div>
                                                    <div class="ml-4">
                                                        <div class="text-sm font-medium text-gray-900">普通会员</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">0-2,499</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">已达成</span>
                                            </td>
                                        </tr>
                                        <tr class="bg-blue-50">
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="flex items-center">
                                                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
                                                        <i class="fas fa-medal text-yellow-500"></i>
                                                    </div>
                                                    <div class="ml-4">
                                                        <div class="text-sm font-medium tier-gold">黄金会员</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">2,500-9,999</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1年</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span th:if="${user.getGrade() == '普通会员'}" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">升级中</span>
                                                <span th:if="${user.getGrade() == '黄金会员'}" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">当前等级</span>
                                                <span th:if="${user.getGrade() == '白金会员'}" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">已达成</span>
                                                <span th:if="${user.getGrade() == '钻石会员'}" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">已达成</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="flex items-center">
                                                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                                                        <i class="fas fa-star text-gray-500"></i>
                                                    </div>
                                                    <div class="ml-4">
                                                        <div class="text-sm font-medium tier-platinum">白金会员</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10,000-24,999</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1年</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span th:if="${user.getGrade() == '普通会员'}" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">未达成</span>
                                                <span th:if="${user.getGrade() == '黄金会员'}" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">升级中</span>
                                                <span th:if="${user.getGrade() == '白金会员'}" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">当前等级</span>
                                                <span th:if="${user.getGrade() == '钻石会员'}" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">已达成</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <div class="flex items-center">
                                                    <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                                                        <i class="fas fa-gem text-blue-500"></i>
                                                    </div>
                                                    <div class="ml-4">
                                                        <div class="text-sm font-medium tier-diamond">钻石会员</div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25,000+</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2年</td>
                                            <td class="px-6 py-4 whitespace-nowrap">
                                                <span th:if="${user.getGrade()} == '普通会员'" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">未达成</span>
                                                <span th:if="${user.getGrade()} == '黄金会员'" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">未达成</span>
                                                <span th:if="${user.getGrade()} == '白金会员'" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">升级中</span>
                                                <span th:if="${user.getGrade()} == '钻石会员'" class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">当前等级</span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Benefits Tab -->
                    <div id="benefits-tab" class="tab-content hidden">
                        <div class="mb-8">
                            <h3 class="text-lg font-medium text-gray-800 mb-4">您的专属权益</h3>
                            <div th:if="${user.getGrade()} == '普通会员'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Gold Tier Benefits -->
                                <div class="bg-white border border-gray-200 rounded-xl p-6">
                                    <div class="flex items-center space-x-3 mb-4">
                                        <div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                                            <i class="fas fa-user text-gray-500"></i>
                                        </div>
                                        <h4 class="text-lg font-bold tier-platinum">普通会员权益</h4>
                                    </div>

                                    <div class="space-y-4">
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">里程积累</h5>
                                                <p class="text-sm text-gray-600">每次飞行获得基础100%里程</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Next Tier Benefits -->
                                <div class="bg-white border border-yellow-200 rounded-xl p-6">
                                    <div class="flex items-center space-x-3 mb-4">
                                        <div class="h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
                                            <i class="fas fa-medal text-yellow-500"></i>
                                        </div>
                                        <h4 class="text-lg font-bold tier-gold">黄金会员权益</h4>
                                    </div>

                                    <div class="space-y-4">
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">额外行李额</h5>
                                                <p class="text-sm text-gray-600">免费增加10公斤托运行李额</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">优先值机</h5>
                                                <p class="text-sm text-gray-600">享受专属值机柜台，减少排队时间</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">里程加速</h5>
                                                <p class="text-sm text-gray-600">每次飞行额外获得15%里程</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-6 pt-4 border-t border-gray-200">
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600" th:text="'升级还需: '+${2500 - mileage}+' 里程'">升级还需: 1,500 里程</span>
                                        </div>
                                        <div class="progress-bar mt-2">
                                            <div class="progress-fill progress-gold" th:text="(${mileage} / 2500 * 100) + '%'"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div th:if="${user.getGrade()} == '黄金会员'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Gold Tier Benefits -->
                                <div class="bg-white border border-yellow-200 rounded-xl p-6">
                                    <div class="flex items-center space-x-3 mb-4">
                                        <div class="h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center">
                                            <i class="fas fa-medal text-yellow-500"></i>
                                        </div>
                                        <h4 class="text-lg font-bold tier-gold">黄金会员权益</h4>
                                    </div>
                                    
                                    <div class="space-y-4">
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">额外行李额</h5>
                                                <p class="text-sm text-gray-600">免费增加10公斤托运行李额</p>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">优先值机</h5>
                                                <p class="text-sm text-gray-600">享受专属值机柜台，减少排队时间</p>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">里程加速</h5>
                                                <p class="text-sm text-gray-600">每次飞行额外获得15%里程</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Next Tier Benefits -->
                                <div class="bg-white border border-gray-200 rounded-xl p-6">
                                    <div class="flex items-center space-x-3 mb-4">
                                        <div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                                            <i class="fas fa-star text-gray-500"></i>
                                        </div>
                                        <h4 class="text-lg font-bold tier-platinum">白金会员权益</h4>
                                    </div>
                                    
                                    <div class="space-y-4">
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">贵宾休息室</h5>
                                                <p class="text-sm text-gray-600">每年4次免费机场贵宾休息室使用权</p>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">额外行李额</h5>
                                                <p class="text-sm text-gray-600">免费增加20公斤托运行李额</p>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">免费升舱</h5>
                                                <p class="text-sm text-gray-600">每年2次经济舱免费升舱机会</p>
                                            </div>
                                        </div>
                                        
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">里程加速</h5>
                                                <p class="text-sm text-gray-600">每次飞行额外获得25%里程</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mt-6 pt-4 border-t border-gray-200">
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600" th:text="'升级还需: '+${mileage}+' 里程'">升级还需: 1,500 里程</span>
                                        </div>
                                        <div class="progress-bar mt-2">
                                            <div class="progress-fill progress-platinum" th:text="(${mileage} / 10000 * 100) + '%'"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div th:if="${user.getGrade()} == '白金会员'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Gold Tier Benefits -->
                                <div class="bg-white border border-gray-200 rounded-xl p-6">
                                    <div class="flex items-center space-x-3 mb-4">
                                        <div class="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                                            <i class="fas fa-star text-gray-500"></i>
                                        </div>
                                        <h4 class="text-lg font-bold tier-platinum">白金会员权益</h4>
                                    </div>

                                    <div class="space-y-4">
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">贵宾休息室</h5>
                                                <p class="text-sm text-gray-600">每年4次免费机场贵宾休息室使用权</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">优先值机</h5>
                                                <p class="text-sm text-gray-600">享受专属值机柜台，减少排队时间</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">额外行李额</h5>
                                                <p class="text-sm text-gray-600">免费增加20公斤托运行李额</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">免费升舱</h5>
                                                <p class="text-sm text-gray-600">每年2次经济舱免费升舱机会</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">里程加速</h5>
                                                <p class="text-sm text-gray-600">每次飞行额外获得25%里程</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Next Tier Benefits -->
                                <div class="bg-white border border-blue-200 rounded-xl p-6">
                                    <div class="flex items-center space-x-3 mb-4">
                                        <div class="h-10 w-10 rounded-full bg-blue-200 flex items-center justify-center">
                                            <i class="fas fa-gem text-blue-500"></i>
                                        </div>
                                        <h4 class="text-lg font-bold tier-diamond">钻石会员权益</h4>
                                    </div>

                                    <div class="space-y-4">
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">贵宾休息室</h5>
                                                <p class="text-sm text-gray-600">每年不限次免费机场贵宾休息室使用权</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">额外行李额</h5>
                                                <p class="text-sm text-gray-600">免费增加30公斤托运行李额</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">免费升舱</h5>
                                                <p class="text-sm text-gray-600">每年4次经济舱免费升舱机会</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-lock text-gray-400"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">里程加速</h5>
                                                <p class="text-sm text-gray-600">每次飞行额外获得50%里程</p>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mt-6 pt-4 border-t border-gray-200">
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm text-gray-600" th:text="'升级还需: '+${mileage}+' 里程'">升级还需: 1,500 里程</span>
                                        </div>
                                        <div class="progress-bar mt-2">
                                            <div class="progress-fill progress-diamond" th:text="(${mileage} / 25000 * 100) + '%'"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div th:if="${user.getGrade()} == '钻石会员'" class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Gold Tier Benefits -->
                                <div class="bg-white border border-blue-200 rounded-xl p-6">
                                    <div class="flex items-center space-x-3 mb-4">
                                        <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                                            <i class="fas fa-gem text-blue-500"></i>
                                        </div>
                                        <h4 class="text-lg font-bold tier-gold">钻石会员权益</h4>
                                    </div>

                                    <div class="space-y-4">
                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">贵宾休息室</h5>
                                                <p class="text-sm text-gray-600">每年不限次免费机场贵宾休息室使用权</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">优先值机</h5>
                                                <p class="text-sm text-gray-600">享受专属值机柜台，减少排队时间</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">额外行李额</h5>
                                                <p class="text-sm text-gray-600">免费增加30公斤托运行李额</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">免费升舱</h5>
                                                <p class="text-sm text-gray-600">每年4次经济舱免费升舱机会</p>
                                            </div>
                                        </div>

                                        <div class="flex items-start space-x-3">
                                            <div class="flex-shrink-0 mt-1">
                                                <i class="fas fa-check-circle text-green-500"></i>
                                            </div>
                                            <div>
                                                <h5 class="font-medium text-gray-800">里程加速</h5>
                                                <p class="text-sm text-gray-600">每次飞行额外获得50%里程</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-medium text-gray-800 mb-4">所有会员权益</h3>
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">权益</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">普通会员</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">黄金会员</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">白金会员</th>
                                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">钻石会员</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">里程累积</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">基础100%</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">115%</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">125%</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">150%</td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">额外行李额</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">+10kg</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+20kg</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">+30kg</td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">优先值机</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium"><i class="fas fa-check text-green-500"></i></td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-check text-green-500"></i></td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"><i class="fas fa-check text-green-500"></i></td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">贵宾休息室</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4次/年</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">不限次</td>
                                        </tr>
                                        <tr>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">免费升舱</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2次/年</td>
                                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4次/年</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- Footer -->
<footer class="bg-gray-50 mt-12">
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center space-x-2 mb-4">
                    <i class="fas fa-plane text-2xl text-blue-500"></i>
                    <h3 class="text-xl font-bold logo-text">花龙腾航</h3>
                </div>
                <p class="text-gray-600 text-sm">花龙腾航，让您的每一次飞行都成为美好回忆。我们致力于提供安全、舒适、便捷的航空服务。</p>
            </div>
            <div>
                <h4 class="font-bold text-gray-800 mb-4">关于我们</h4>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">公司简介</a></li>
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">企业文化</a></li>
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">发展历程</a></li>
                    <li><a href="public_job_posting" class="hover:text-blue-500 transition">招贤纳士</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-bold text-gray-800 mb-4">帮助中心</h4>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li><a href="public_faq" class="hover:text-blue-500 transition">常见问题</a></li>
                    <li><a href="public_baggage_regulations" class="hover:text-blue-500 transition">行李规定</a></li>
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">航班动态</a></li>
                    <li><a href="public_callus" class="hover:text-blue-500 transition">联系客服</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-bold text-gray-800 mb-4">联系我们</h4>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li class="flex items-center"><i class="fas fa-phone-alt mr-2 text-blue-500"></i> 客服热线: 19976338635</li>
                    <li class="flex items-center"><i class="fas fa-envelope mr-2 text-blue-500"></i> ganshenghao888@qq.com</li>
                    <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> 广东省广州市天河区华南农业大学</li>
                </ul>
                <div class="flex space-x-4 mt-4">
                    <a href="https://weixin.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                        <i class="fab fa-weixin"></i>
                    </a>
                    <a href="https://weibo.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                        <i class="fab fa-weibo"></i>
                    </a>
                    <a href="https://qq.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                        <i class="fab fa-qq"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="border-t border-gray-200 mt-8 pt-6 text-center text-sm text-gray-500">
            <p>© 2025 花龙腾航航空公司 版权所有 | 京ICP备12345678号</p>
        </div>
    </div>
</footer>

<script>
    // Show tab content
    function showTab(tabId) {
        // Hide all tab contents
        document.querySelectorAll('.tab-content').forEach(tab => {
            tab.classList.add('hidden');
        });
        
        // Show selected tab content
        document.getElementById(`${tabId}-tab`).classList.remove('hidden');
        
        // Update active tab style
        document.querySelectorAll('[id^="tab-"]').forEach(tab => {
            tab.classList.remove('tab-active');
            tab.classList.add('text-gray-500');
        });
        
        const activeTab = document.getElementById(`tab-${tabId}`);
        activeTab.classList.add('tab-active');
        activeTab.classList.remove('text-gray-500');
    }
    
    // Toggle user dropdown menu
    document.getElementById('user-menu').addEventListener('click', function(event) {
        event.stopPropagation();
        document.getElementById('dropdown-menu').classList.toggle('open');
    });
    
    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
        const dropdown = document.getElementById('dropdown-menu');
        const userMenu = document.getElementById('user-menu');
        
        if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) {
            dropdown.classList.remove('open');
        }
    });
    
    // Initialize the page
    document.addEventListener('DOMContentLoaded', function() {
        showTab('overview');
    });
</script>
</body>
</html>